<template>
	<div>
		<div ref="main" style="width: 800px;height: 600px; margin: 10px auto;">

		</div>
	</div>
</template>

<script>
	export default {
		name: "DataManage",
		data: function() {
			return {

			}
		},
		methods: {
			initCharts() {
				let  myChart = echarts.init(document.getElementById('main'));
				let option = {
					title: {
						text: '各类文章统计',
						subtext: '数量统计',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [
						{
							name: '文章数量',
							type: 'pie',
							radius: '50%',
							data: [
								{value: 1046,name:'科幻'},
								{value: 745,name:'技术前沿'},
								{value: 532,name:'都市言情'},
								{value: 523,name:'武侠古典'}							],
							emphasis: {
								itemStyle:{
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'agba(0,0,0,0.5)'
								}
							}
						}
					]
				}
				option && myChart.setOption(option);
			}
		},
		mounted() {
			this.initCharts();
		}
	}
</script>

<style>
</style>
